একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।
বুটস্ট্রাপ ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।
ক্লাস | বর্ণনা |
---|---|
.nav nav-tabs | ন্যাভিগেশন ট্যাব তৈরী করে। |
.nav-justified | যখন স্ক্রীন 768px থেকে বড় থাকে,ন্যাভিগেশন ট্যাব/পিল কে তাদের পেরেন্টের দৈঘ্যের সমান রাখে। আর ছোট স্ক্রীনের ক্ষেত্রে, ন্যাভিগেশন ট্যাব গুলো stack আকারে থাকে। |
.tab-content | .tab-pane ক্লাস এবং data-toggle="tab" এট্রিবিউট একত্রে ট্যাবকে টোগলেবল করে। |
.tab-pane | .tab-content ক্লাস এবং data-toggle="tab" এট্রিবিউটের সাহায্যে একত্রে টোগলেবল করে। |
ট্যাবের মধ্যে data-toggle="tab"
এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane
ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content
ক্লাসের আওতায় অন্তর্ভূক্ত করুন।
kt_satt_skill_example_id=1300
ম্যানুয়ালি সক্রিয় করার জন্যঃ
kt_satt_skill_example_id=1301
kt_satt_skill_example_id=1302
ট্যাব মেথড নিচের টেবিলে দেখানো হলো।
মেথড | বর্ণনা | উদাহরণ |
---|---|---|
.tab("show") | ট্যাব প্রদর্শন করে। | উদাহরণ দেখুন |
ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।
ইভেন্ট | বর্ণনা | উদাহরণ |
---|---|---|
show.bs.tab | যখন ট্যাব প্রদর্শন করা হয় তখন সম্পন্ন হয়। | উদাহরণ দেখুন |
shown.bs.tab | যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
hide.bs.tab | যখন ট্যাব হাইড করা হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.tab | যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।
আরও দেখুন...